<template>
	<div class="bg">
		<div class="informations">
			<goback title="个人信息"></goback>
			<div class="information1" style="height: 15vw;" @click="handleUpload">
				<div class="information2">
					<div class="information-text">头像</div>
				</div>
				<div class="imgs" >
					<img :src="imgsrc" alt="" class="information-img2">
					<input ref="fileInput" type="file" style="display: none;" @change="uploadImage">
					<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="information-img1">
				</div>
			</div>
			<div class="information1" @click="gointoname">
				<div class="information2">
					<div class="information-text">名字</div>
				</div>
				<div class="right">
					<div>{{name}}</div>
					<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="information-img1">
				</div>

			</div>
			<div class="information1">
				<div class="information2">
					<div class="information-text">积分</div>
				</div>
				<div style="margin-right: 4vw;">{{jifen}}</div>

			</div>

			<div class="information1">
				<div class="information2">
					<div class="information-text">UID</div>
				</div>
				<div class="right">
					<div style="margin-right: 4vw;">{{uid}}</div>
				</div>
			</div>
		</div>


		<div class="phone" @click="$router.push('/changepassword')">
			<div class="phone2">
				<div class="phone-text">修改密码</div>
			</div>
			<div class="right">
				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="information-img1">
			</div>
		</div>


		<div class="phone" @click="gointophone">
			<div class="phone2">
				<div class="phone-text">联系方式</div>
			</div>
			<div class="right">
				<div>{{phone}}</div>
				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="information-img1">
			</div>
		</div>

<!-- 		<div class="address" @click="gointoaddress">
			<div class="address2">
				<div class="address-text">所在地</div>
			</div>
			<div class="right">

				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="information-img1">
			</div>
		</div> -->
		
		
	</div>

</template>

<script>
	export default {
		data() {
			return {
				imgsrc: "",
				name: '帅气的用户',
				jifen: "150",
				uid: "123456789",
				phone: '123456789',
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				console.log(this.$store.getters.getUser)
				this.user = this.$store.getters.getUser;
				this.imgsrc = this.user.head_img,
					this.name = this.user.name;
				this.jifen = this.user.score;
				this.uid = this.user.uid;
				this.phone = this.user.telephone;
			},
			handleUpload() {
				// 触发上传图片的方法
				this.$refs.fileInput.click();
			},
			uploadImage(event) {
				// 上传图片的方法
				const formData = new FormData();
				formData.append('file', event.target.files[0]);
				formData.append('token',this.getStorage('token'));
				// 发送 POST 请求上传图片
				this.axios.post(`${this.IP}/upload_headimg`, formData)
					.then(response => {
						// 上传成功后，更新图片地址
						this.imgsrc = response.data.url;
						location.reload();
					})
					.catch(error => {
						console.error('上传失败：', error);
					});
			},
			gointoname() {
				this.$router.push('/name');
			},
			gointophone() {
				this.$router.push('/phone');
			},
			gointoaddress() {
				this.$router.push('/address');
			}
		}
	}
</script>

<style scoped>
	.information1 {
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 12vw;
		border-bottom: 1px solid gainsboro;
	}

	.information-text {
		margin-left: 3vw;
		font-size: 4vw;
		text-align: center;
	}

	.imgs {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.information-img2 {
		border-radius: 2vw;
		width: 12vw;
	}

	.information-img1 {
		width: 5vw;
		margin-right: 2vw;
		text-align: center;
	}

	.phone {
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 3vw;
		border-bottom: 1px solid gainsboro;
		height: 12vw;

	}

	.phone-text {

		margin-left: 3vw;
		font-size: 4vw;
		text-align: center;
	}

	.phone-img1 {
		width: 5vw;
		margin-right: 2vw;
		text-align: center;
	}

	.address {
		background-color: white;
		margin-top: 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 12vw;
		border-bottom: 1px solid gainsboro;
	}

	.address-text {

		margin-left: 3vw;
		font-size: 4vw;
		text-align: center;
	}

	.address-img1 {
		width: 5vw;
		margin-right: 2vw;
		text-align: center;
	}
</style>